* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #5D75B3;
	color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.BingDunDun {
	width: 600px;
	height: 500px;
	position: relative; 
}

.body {
	width: 362px;
	height: 410px;
	border: 8px solid #393939;
	border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
	position: absolute;
	left: 109px;
	top: 10px;
	background: #fff;
}

.ear1,
.ear2 {
	width: 81px;
	height: 115px;
	background-color: #393939;
	border-radius: 50%;
	position: absolute;
	z-index: -1;
}

.ear1 {
	left: 150px;
	top: 16px;
	transform: rotate(-10deg);
}

.ear2 {
	left: 362px;
	top: 18px;
	transform: rotate(10deg);
}

/* eyes */

.eye1,
.eye2 {
	background-color: #393939;
	width: 83px;
	height: 115px;
	border-radius: 50%;
	position: absolute;
}

.eye1 {
	left: 185px;
	top: 102px;
	transform: rotate(45deg);
}

.eye2 {
	left: 329px;
	top: 102px;
	transform: rotate(-45deg);
}

.eye1:before,
.eye2:before {
	content: "";
	width: 40px;
	height: 40px;
	border: #fff 5px solid;
	border-radius: 100%;
	position: absolute;
}
.eye1:before {
	right: 10px;
	top: 22px;
}

.eye2:before {
	left: 10px;
	top: 22px;
}

.eye1:after,
.eye2:after {
	content: "";
	width: 10px;
	height: 10px;
	background: #9b9b9b;
	border-radius: 100%;
	position: absolute;
}

.eye1:after {
	right: 27px;
	top: 31px;
}

.eye2:after {
	left: 41px;
	top: 44px;
}

.face {
	position: absolute;
	border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
}

.c_blue {
	border: #6bcdf3 5px solid;
	width: 280px;
	height: 224px;
	left: 150px;
	top: 58px;
}
.c_red {
	border: #af2350 5px solid;
	width: 287px;
	height: 233px;
	left: 146px;
	top: 53px;
}
.c_purple {
	border: #5d75b3 5px solid;
	width: 295px;
	height: 240px;
	left: 142px;
	top: 50px;
}

.c_yellow {
	border: #ffc346 5px solid;
	width: 305px;
	height: 248px;
	left: 137px;
	top: 45px;
}

.c_green {
	border: #7fcb58 5px solid;
	width: 313px;
	height: 256px;
	left: 133px;
	top: 41px;
}

.nose {
	position: absolute;
	left: 284px;
	top: 167px;
	width: 28px;
	height: 18px;
	background-color: #333333;
	border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
}

.mouse {
	position: absolute;
	left: 265px;
	top: 185px;
	width: 68px;
	height: 25px;
	border-radius: 48%;
	border: #393939 7px solid;
	border-top: none;
	border-left: 0;
	border-right: 0;
	
}

.leg1,
.leg2 {
	background: #333;
	position: absolute;
	width: 83px;
	height: 80px;
	border-radius: 0 0 30px 30px;
	z-index: -1;
}

.leg1 {
	left: 187px;
	top: 403px;
}

.leg2 {
	left: 328px;
	top: 403px;
}

.leg1::before,
.leg2:before {
	content: "";
	width: 43px;
	height: 30px;
	position: absolute;
	background: #363636;
	border-radius: 30px;
}

.leg1:before {
	bottom: 0;
	right: -3px;
}

.leg2:before {
	bottom: 0;
	left: -3px;
}

.arm1,
.arm2 {
	background: #333;
	position: absolute;
	z-index: -1;
}

.arm1 {
	width: 75px;
	height: 118px;
	left: 64px;
	top: 224px;
	transform: rotate(45deg);
	border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
}

.arm2 {
	width: 75px;
	height: 148px;
	left: 463px;
	top: 142px;
	transform: rotate(37deg);
	border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
}

.arm2:before {
	content: "";
	width: 16px;
	height: 24px;
	background: #bc242c;
	position: absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform: rotate(45deg);
	left: 32px;
	top: 20px;
}

.arm2:after {
	content: "";
	width: 16px;
	height: 24px;
	background: #bc242c;
	position: absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform: rotate(-45deg);
	left: 26px;
	top: 20px;
}

.logo {
	background: url(../images/olp.jpg) no-repeat;
	width: 70px;
	height: 100px;
	background-size: cover;
	position: absolute;
	left: 265px;
	top:310px
}

 